/*
 * @Description:
 * @Autor: zhangbing
 * @Date: 2021-06-15 14:46:56
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-06-16 10:02:18
 */

import React, { Component } from 'react'

export default class Footer extends Component {
  handleClearAllDone = () => {
    console.log('删除已完成')
    this.props.deleteAllDoneToDo()
  }
  handleAllChecked = e => {
    this.props.checkAllToDo(e.target.checked)
  }
  render() {
    const { todos } = this.props
    const doneCount = todos.reduce((prev, item) => {
      return prev + (item.done === true ? 1 : 0)
    }, 0)
    return (
      <div style={{ marginTop: '40px' }}>
        <label>
          <input
            type='checkbox'
            checked={doneCount === todos.length && todos.length > 0 ? true : false}
            onChange={this.handleAllChecked}
          />
          <span>已完成{doneCount}/</span>
          <span> 总数{todos.length}</span>
        </label>
        <button
          style={{ border: 'none', backgroundColor: 'red', color: 'white', marginLeft: '130px' }}
          onClick={this.handleClearAllDone}
        >
          删除所有已完成
        </button>
      </div>
    )
  }
}
